<template>
	<div class="sub-title">
		<slot name="title">
			<div class="title">{{ title }}</div>
		</slot>
		<slot name="right">
			<div class="right">{{ rightSlot }}</div>
		</slot>
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	interface Props {
		title?: string
		rightSlot?: string
	}
	withDefaults(defineProps<Props>(), {
		title: '小标题',
		rightSlot: '',
	})
</script>

<style lang="scss" scoped>
	.sub-title {
		position: relative;
		width: 100%;
		height: 55px;
		background-size: 100% 100%;
		margin-bottom: 30px;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		.title {
			width: 100%;
			height: 100%;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			font-family: OPPO;
			letter-spacing: 2px;
			font-size: 32px;
			padding-left: 40px;
			&::before {
				position: absolute;
				bottom: 0;
				left: 0;
				content: '';
				width: 42px;
				height: 42px;
				background-image: url(@img/global/second-title-icon.png);
				background-size: 100% 100%;
			}
		}
		&::before {
			position: absolute;
			bottom: 0;
			content: '';
			right: 0;
			width: calc(100% - 21px);
			height: 3px;
			background-image: radial-gradient(
				118% 5915% at 20% 0%,
				#edf7ff 0%,
				rgba(136, 182, 215, 0.825) 33%,
				rgba(162, 216, 255, 0.1717) 100%
			);
		}
		&::after {
			position: absolute;
			bottom: 0;
			content: '';
			right: 0;
			width: 10px;
			height: 10px;
			background-color: #fff;
		}
	}
	.right {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20px;
		font-size: 38px;
		font-family: DIN;
	}
</style>
